<!DOCTYPE html>
<html lang="en">

<head>
    <title>My BCIT Project</title>
    <meta name="comp2800 template" content="My 2800 App">

    <!------------------------>
    <!-- Required meta tags -->
    <!------------------------>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!------------------------------------------>
    <!-- Bootstrap Library CSS JS CDN go here -->
    <!------------------------------------------>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
        <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/js/bootstrap.js" crossorigin="anonymous"></script>
    
        <!-------------------------------------------------------->
        <!-- Firebase 8 Library related CSS, JS, JQuery go here -->
        <!-------------------------------------------------------->
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>

    <!-------------------------------------------------------->
    <!-- Firebase 8 Library related CSS, JS, JQuery go here -->
    <!-------------------------------------------------------->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>

    <!-------------------------------------------->
    <!-- Other libraries and styles of your own -->
    <!-------------------------------------------->
    <!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> -->
    <!-- <link rel="stylesheet" href="./styles/style.css"> -->

</head>

<body>
    <!------------------------------>
    <!-- Your HTML Layout go here -->
    <!------------------------------>

    <!-- our own navbar goes here -->
    <nav id="navbarPlaceholder"></nav>

    <!-- the body of your page goes here -->
    <div class="container col-xxl-8 px-4 py-5">
        <div class="row flex-lg-row-reverse align-items-center g-5 py-5">
          <div class="col-10 col-sm-8 col-lg-6">
            <img src="images/kitchen_coffee.jpg" class="d-block mx-lg-auto img-fluid" alt="Bootstrap Themes" width="700" height="500" loading="lazy">
          </div>
          <div class="col-lg-6">
            <h1 class="display-5 fw-bold lh-1 mb-3">Coffee</h1>
            <p class="lead">Coffee, originally from Ethiopia, is made from refined coffee beans. Coffee beans are roasted to different degrees and have different flavors. Light baking partial fresh fruit acid, medium baking taste mellow, deep baking has rich coke aroma. When brewing, hot water extracts the essence of coffee powder, and the aroma is instantly overflowing. A light taste, bitter, sour, sweet and other taste layers are rich, lingering, not only brings wonderful taste experience, but also can effectively refresh the mind, is an indispensable classic drink in People's Daily life.</p>
            <div class="d-grid gap-2 d-md-flex justify-content-md-start">
              <button onclick="window.location.href='login.html'" type="button" class="btn btn-primary btn-lg px-4 me-md-2">Login</button>
              <button onclick="window.location.href='signup.html'" type="button" class="btn btn-outline-secondary btn-lg px-4">signup</button>
            </div>
          </div>
        </div>
      </div>

    <!-- our own footer goes here-->
    <nav id="footerPlaceholder"></nav>

    <!---------------------------------------------->
    <!-- Your own JavaScript functions go here    -->
    <!---------------------------------------------->
    
    <!-- <script src="./scripts/script.js"></script> -->
    <script src="./scripts/script.js"></script>
    <script src="./scripts/skeleton.js"></script>
    
</body>

</html>
